/* ARWA motion tokens — CSS custom properties for transitions + keyframes.
   Duration scale: fast 150ms, standard 250ms, emphasized 400ms, wave 900ms.
   Signature easing: --ease-water (soft entry, gentle lift). Droplets get a subtle bounce.
   Always respect prefers-reduced-motion. */

:root {
  --dur-fast: 150ms;
  --dur-standard: 250ms;
  --dur-emphasized: 400ms;
  --dur-wave: 900ms;

  --ease-water:    cubic-bezier(0.22, 0.61, 0.36, 1.00);
  --ease-droplet:  cubic-bezier(0.34, 1.32, 0.48, 1.00);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Droplet landing — subtle bounce on arrival (for hero flourishes only) */
@keyframes droplet-land {
  0%   { transform: translateY(-12px); opacity: 0; }
  70%  { transform: translateY(2px);   opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}
.anim-droplet-land { animation: droplet-land var(--dur-emphasized) var(--ease-droplet) both; }

/* Wave crest — slow, water-like rise */
@keyframes wave-crest {
  0%   { transform: translateY(8px)  scaleY(0.94); }
  60%  { transform: translateY(-2px) scaleY(1.02); }
  100% { transform: translateY(0)    scaleY(1); }
}
.anim-wave-crest { animation: wave-crest var(--dur-wave) var(--ease-water) both; }

/* Content fade + rise — default entrance */
@keyframes rise-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.anim-rise-in { animation: rise-in var(--dur-emphasized) var(--ease-water) both; }

/* Defaults for interactive surfaces */
button, a, [role="button"] {
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-water),
              box-shadow var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .anim-droplet-land, .anim-wave-crest, .anim-rise-in { animation: none !important; }
}